<template>
    <div class="container">
        <info-card v-for="item in infoList" :key="item.key" :infoList="item" @evaEvent="evaEvent"/>
        <div class="bottom-btn" v-if="evaFlag">
            <van-field
                    @blur="blurEvent"
                    v-model="evaluateValue"
                    center
                    clearable
                    placeholder="说点什么吧...">
                <van-button slot="button" size="small">发送</van-button>
            </van-field>
        </div>
    </div>
</template>

<script>
    import InfoCard from './info-card'
    import {Field, Button} from 'vant'

    export default {
        components: {
            InfoCard,
            [Field.name]: Field,
            [Button.name]: Button
        },
        data() {
            return {
                evaluateValue: '',//评价内容
                evaFlag: false,//评价标识
                infoList: [
                    {
                        headImg: 'https://avatar-static.segmentfault.com/399/852/3998521445-5ae2be4c903da_big64',
                        name: '芳的独家记忆',
                        updateTime: '2019.01.25 : 17:30',
                        content: '随着春姑娘轻快的步伐，青青的小草，破土而出，偷偷的从土里钻出来，' +
                            '嫩嫩的，绿绿的。在公园里，到处都可以看见这一些生命力顽强的小草。',
                        size: '608次浏览'
                    },
                    {
                        headImg: 'https://avatar-static.segmentfault.com/843/501/843501995-5c3f4dacdeba4_big64',
                        name: '豪的唯美幸福',
                        updateTime: '2019.01.25 : 17:39',
                        content: '盛夏，天热得连蜻蜓都只敢贴着树荫处飞，好像怕阳光伤了自己的翅膀。',
                        size: '2301次浏览'
                    }, {
                        headImg: 'https://avatar-static.segmentfault.com/217/339/2173397222-5c46868c2ef93_big64',
                        name: '_小生_',
                        updateTime: '2019.01.25 : 17:58',
                        content: '春又来，人已去，风烟残，夕阳晚，樱花开。顷刻散零乱，年光逝，韶华落，飞絮转，' +
                            '不堪看，路漫漫。空梦断零乱，渡忘川彼岸，忘不掉人长叹。古井下月光思念装满，樱花瓣飞过，' +
                            '风幽怨，水清寒，离伤黯，游丝转零乱。',
                        size: '1580次浏览'
                    }, {
                        headImg: 'https://avatar-static.segmentfault.com/123/843/1238436638-597c1a465bbd2_big64',
                        name: '疯狂的技术宅',
                        updateTime: '2019.01.25 : 18:12',
                        content: '大海的深处是平静的，花朵的一生是无声的，巍峨的山峦是缄默的。' +
                            '大自然中许多蔚为壮观的生命往往以沉默示人。',
                        size: '101次浏览'
                    }, {
                        headImg: 'https://avatar-static.segmentfault.com/339/332/3393327973-599c03d60585c_big64',
                        name: '以乐之名',
                        updateTime: '2019.01.25 : 18:30',
                        content: '山腰之上，黄栌树丛生，枝叶如云，金秋时节，层林尽染，如火如荼，恰似少女红装。',
                        size: '1588次浏览'
                    }
                ]
            }
        },
        mounted(){
            let that = this;
            addEventListener('scroll',function (event) {
                that.evaFlag = false;
            })
        },
        methods: {
            evaEvent() {
                this.evaFlag = !this.evaFlag;
                this.$nextTick(() => {
                    if (document.getElementsByClassName("van-field__control")[0]) {
                        document.getElementsByClassName("van-field__control")[0].focus();
                    }
                })
            },
            blurEvent(){
                this.evaFlag = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: 100%;
        background: #f4f4f4;
        .bottom-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-top: 4px;
        }
    }
</style>
